#{extends 'main.html' /}
#{set title:'Show repository' /}

<h2 class="ui-widget-header ui-widget ui-corner-all">${rep.id ? messages.get('repository.edittitle') : messages.get('repository.createtitle') }</h2>

#{ifErrors}
	<fieldset class="ui-corner-tl ui-corner-tr ui-state-error">&{'error.detected'}</fieldset>
#{/ifErrors}

<form action="@{Repositories.save()}" id="saverep" enctype="multipart/form-data" method="POST" accept-charset="utf-8">
<fieldset class="ui-widget-content group">
	<legend>&{'repository.group'}</legend>
	<table>
		<tr>
			<td width="150"><label for="rep.name">&{'repository.name'}:</label></td>
			<td><input type="text" name="rep.name" value="${rep.name}" /></td>
			<td><span class="error">#{error 'rep.name' /}</span></td>
		</tr>
	</table>
	<input type="text" class="ui-helper-hidden" name="id" value="${rep.id}" />
</fieldset>

#{if rep.id}
</form>
#{/if}

#{if models.Module.list().isEmpty() == false}

<fieldset class="ui-widget ui-widget-content group">
	<legend>&{'module.group'}</legend>
	%{def modules = rep.modules}%
	%{def available = rep.availableModules()}%
	<div id="tabs" class="ui-widget-content ui-corner-all">
		<ul>
			#{list items:modules, as:'mod'}
			<li><a href="#tabs-${mod.id}">${mod.name}</a></li>
			#{/list}
			#{if available}
			<li><a href="#tabs-new">&{'tabs.new'}</a></li>
			#{/if}
		</ul>
		#{list items:modules, as:'mod'}
		<div id="tabs-${mod.id}" rel="${mod.id}" pos="${mod_index - 1}">
			<table>
				<tr>
					<td width="130"><label>&{'module.fullname'}:</label></td>
					<td>${mod.fullname}</td>
				</tr>
				<tr>
					<td><label>&{'module.versions'}:</label></td>
					<td>
					#{list items:mod.versions, as:'version'}
						#{if version.isDefault}
						<b>
						#{/if}
						${version.version}
						#{if version.isDefault}
						</b>
						#{/if}
						&nbsp;
					#{/list}
					</td>
				</tr>
				<tr>
					<td colspan="3" class="commands">
						<button id="button" rel="${mod.id}" class="button detach">&{'button.detach'}</button>
					</td>
				</tr>
			</table>
		</div>
		#{/list}
		#{if available}
		<div id="tabs-new">
			#{if rep.id}
			<form action="@{Repositories.attachModule()}" enctype="multipart/form-data" method="POST" accept-charset="utf-8">
			#{/if}
			<table>
				<tr>
					<td width="130"><label for="name">&{'module.name'}: </label></td>
					<td><select type="text" name="modid">
						#{list items:available, as:'mod'}
						<option value="${mod.id}">${mod.name}</option>
						#{/list}
					</select></td>
				</tr>
				#{if rep.id}
				<tr>
					<td colspan="3" class="commands">
						<button id="button" class="button attach">&{'button.attach'}</button>
					</td>
				</tr>
				#{/if}
			</table>
			<input type="text" class="ui-helper-hidden" name="id" value="${rep.id}" />
			#{if rep.id}
			</form>
			#{/if}
		</div>
		#{/if}
	</div>
</fieldset>

#{/if}

#{if rep.id == null}
</form>
#{/if}

<a href="@{Application.index()}" class="button">&{'button.back'}</a>
<a href="#" class="button" onclick="javascript:$('form#saverep').submit();">&{'button.save'}</a>

<div id="dialog-detach" title="&{'module.detach'}" class="ui-helper-hidden">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>&{'detach.confirm'}</p>
</div>

<div class="ui-helper-hidden">
#{form @Repositories.detachModule(), id:'detach'}
	<input type="hidden" name="id" value="${rep.id}" />
	<input type="hidden" name="modid" value="" />
#{/form}
</div>

<script>

$(function() {

	$("#tabs").tabs({
		show: function(event, ui) {
			if (ui.panel.id != "tabs-new") {
				if ($('#tabs').tabs().find('div').length == 2) {
					$('button.detach').hide();
				} else {
					$('button.detach').show();
				}
			}
		}
	});
	
	$('.button').button();
	
	$('button.detach').click(function() {
		// Ask for user confirmation
		$('form#detach input[type=hidden][name=modid]:first').attr('value',$(this).attr('rel'));
		$('#dialog-detach').dialog('open');
		return false;
	});

	$("#dialog").dialog("destroy");

	$("#dialog-detach").dialog({
		resizable: false,
		height: "auto",
		modal: true,
		autoOpen: false,
		buttons: {
			'Detach': function() {
				$(this).dialog('close');
				// Send the selected model identifier (value) to the server
				$('form#detach')[0].submit();
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		}
	});

});

</script>
